<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">

</head>
<body>
    <div class="nav">五子棋对战</div>
    <!-- 页面的容器元素 -->
     <div class="container">
        <!-- 这个div 在 container 中位于垂直水平居中 -->
         <div>
            <!-- 用户信息 -->
             <div id="screen"></div>

             <!-- 匹配按钮 -->
              <div id="match-button">开始匹配</div>
         </div>
     </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type: "get",
            url: "/user/getUserInfo",
            success: function (body) {
                let screemDiv = document.querySelector("#screen");

                // 解析ISO时间字符串
                const updateTime = new Date(body.updateTime);

                // 格式化为常用时间格式：YYYY-MM-DD HH:mm:ss
                const formattedTime = updateTime.toLocaleString('zh-CN', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                    hour: '2-digit',
                    minute: '2-digit',
                    second: '2-digit',
                    hour12: false
                }).replace(/\//g, '-');

                screemDiv.innerHTML = '玩家: ' + body.userName + " 分数: " + '<span style="color:red ">'+body.score+'</span>'
                + '<br> <span style="color: #f12fff;">比赛场次：' + body.totalCount + '</span>'
                    + '<span style="color: #FFD700;"> 获胜场数：' + body.winCount + '</span>'
                    +'<br> <span style="color: greenyellow;">势均力敌数：' + body.draw + '</span>'
                    + '<br> <span style="color: black;"> 最近游戏时间：' + formattedTime + '</span>'
            },
            error: function () {
                alert("获取用户信息失败!")
            }
        });

        // 初始化 websocket , 实现前端匹配逻辑
        // 这里路径不能写成 /findMatch/
        let websocketUrl = 'ws://'+location.host+'/findMatch'; // 获取不同主机上的ip地址
        let websocket = new WebSocket(websocketUrl);
        websocket.onopen = function () {
            console.log("onopen");
        }
        websocket.onclose = function () {
            console.log("onclose");
        }
        websocket.onerror = function () {
            console.log("onerror");

        }
        // 监听页面关闭情况, 页面关闭之前, 手动调用这里 websocket 的 close 方法
        window.onbeforeunload = function () {
            websocket.close();
        }

        // 处理服务器返回的响应
        websocket.onmessage = function (e) {
            // 处理服务器返回的数据, 响应就是开始匹配/结束匹配/匹配成功
            // 解析得到的响应对象 , 返回的是JSON字符串, 解析成js对象
            let resp = JSON.parse(e.data);
            let matchButton = document.querySelector('#match-button');
            if (!resp.ok) {
                console.log("游戏大厅里收到了失败响应 :" + resp.reason);
                return;
            }
            if (resp.message == 'startMatch') {
                // 开始匹配发送成功
                console.log("进入匹配队列成功!");
                matchButton.innerHTML = '匹配中...(点击停止)';

            }else if (resp.message == 'stopMatch') {
                // 停止匹配发送成功
                console.log("离开匹配队列成功!");
                matchButton.innerHTML = '开始匹配';
            }else if (resp.message == 'matchSuccess') {
                // 匹配成功
                console.log("匹配到对手, 进入游戏房间!!");
                location.replace("/game_room.html");
            }else if (resp.message == 'repeatConnection'){
                alert("当前检测到你可能多开, 请使用其他账号登录!");
                location.replace("/login.html");
                console.log("收到非法响应 message: " + resp.message);
            }

        }
        // 给匹配按钮添加点击事件
        let matchButton = document.querySelector("#match-button");
        matchButton.onclick = function () {
            // 触发之前要判断 websocket 连接是否正常
            if (websocket.readyState == websocket.OPEN) {
                // readyState 处在 OPEN 状态, 说明正常
                // 这里发送的数据有两种情况, 开始匹配/结束匹配
                if (matchButton.innerHTML == '开始匹配') {
                    console.log("开始匹配");
                    websocket.send(JSON.stringify({
                        message: 'startMatch'
                    }));
                }else if (matchButton.innerHTML == '匹配中...(点击停止)') {
                    console.log("停止匹配");
                    websocket.send(JSON.stringify({
                        message: 'stopMatch'
                    }));
                }
            }else {
                alert("当前连接已断开, 请重新登陆!");
                location.replace("/login.html");
            }
        }
    </script>
</body>
</html>